<template>
  <div class="app-container" style="height: 1000px;">


    <el-input placeholder="用户名" v-model="example.uid" style="width: 150px"></el-input>

    <el-input placeholder="昵称" v-model="example.nickname" style="width: 200px"></el-input>

    <el-select placeholder="用户类型" v-model="example.usertype" style="width: 150px">
      <el-option label="普通用户" value="0"/>
      <el-option label="管理员" value="1"/>
    </el-select>

    <el-button icon="el-icon-search" @click="fetchData" type="primary" round style="margin-left: 10px;">搜索</el-button>
    <el-button icon="el-icon-refresh" @click="reset" circle></el-button>


    <el-table :data="list" v-loading.body="listLoading" element-loading-text="加载数据中" border fit
              highlight-current-row style="margin-top: 20px;">
      <el-table-column align="center" label='用户ID' width="95">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{scope.row.uid}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="昵称" width="110">
        <template slot-scope="scope">
          {{scope.row.nickname}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="用户类型" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.usertype | statusFilter">{{scope.row.usertype | statusReserve}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建日期" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.createdate | dateReserve}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="toModifydetail(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="modifyPwd(scope.row)" type="text" size="small">重置密码</el-button>
          <el-button @click="deleteUser(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @pagination="fetchData"/>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="temp">
        <el-form-item label="用户ID" :label-width="formLabelWidth">
          <el-input v-model="temp.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="temp.uid"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="temp.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="temp.usertype" placeholder="请选择">
            <el-option label="普通用户" value="0"/>
            <el-option label="管理员" value="1"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="modifyData">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {search, modify, deleteUser} from '@/api/user'
  import Pagination from '@/components/Pagination'

  export default {
    components: {Pagination},
    data() {
      return {
        list: null,
        listLoading: true,
        buttonLoading: false,
        dialogFormVisible: false,
        formLabelWidth: 120,
        total: 20,
        page: 1,
        limit: 20,
        example: {
          uid: '',
          nickname: '',
          usertype: ''
        },
        temp: {
          id: '',
          uid: '',
          pwd: '',
          nickname: '',
          usertype: ''
        },

      }
    },
    filters: {
      statusFilter(usertype) {
        const statusMap = {
          1: 'warning',
          0: 'info'
        };
        return statusMap[usertype]
      },
      statusReserve(usertype) {
        const statusMap = {
          1: '管理员',
          0: '普通用户'
        };
        return statusMap[usertype]
      },
      dateReserve(timestamp) {
        // yyyy-MM-dd hh:mm:ss
        var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1);

        return Y + M + D;
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        search({
          page: this.page, limit: this.limit,
          uid: this.example.uid, nickname: this.example.nickname, usertype: this.example.usertype
        }).then(response => {
          this.list = response.data;
          this.total = response.count;
          this.listLoading = false
        })
      },
      reset() {
        for (var key in this.example) {
          this.example[key] = '';
        }
        this.fetchData();
      },
      toModifydetail(rowData) {
        this.temp = Object.assign({}, rowData);
        this.dialogFormVisible = true
      },
      modifyData() {
        this.buttonLoading = true;
        modify({
          id: this.temp.id,
          uid: this.temp.uid,
          pwd: this.temp.pwd,
          nickname: this.temp.nickname,
          usertype: this.temp.usertype
        }).then(response => {
          this.buttonLoading = false;
          this.dialogFormVisible = false;
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          this.fetchData()
        })
      },
      modifyPwd(rowData) {
        this.$prompt('请输入新密码', '重置密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'password'
        }).then(({value}) => {
          this.temp = Object.assign({}, rowData);
          this.temp.pwd = value;
          this.modifyData()
        }).catch(() => {

        });
      },
      deleteUser(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser({id: id}).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.fetchData()
          })
        }).catch(() => {

        });

      }
    }
  }
</script>
